<!-- 分类商品列表页 -->
<template>
	<view class="page" :style="{'--color': color}">
		<backTop v-if='toTop'></backTop>
		<!-- back='0' -->
		<status-bar  :back='back' :title="back !=0?className:tabTitle"></status-bar> 
		<view class="content" :style="{'padding-top':serchState?'100rpx':'160rpx'}">
			<view class="list-nav kite-fixed" :style="{top:navHeight+System.statusBarHeight+'px'}">
				<view class="mySearch flex-box align-center">
					<!-- <text class="iconfont icon-xiangzuo" @click="back()"></text> -->
					<navigator class="navigator-search flex-box align-center flex" url="../classify/search">
						<text class="iconfont icon-btn_search"></text>
						<text class="txt1" v-if='name'>{{name}}</text>
						<text class="txt" v-else>输入搜索关键词</text>
					</navigator>
					<text class="cancel-txt" @click="back()" v-if='serchState'>取消</text>
				</view>
				<view v-if='!serchState' class="tab-list flex-box align-center flex-between">
					<view class="tab-item" @click="checkTab = !checkTab" :class="{thmeColor: type!=4&&type!=2}" :style="{'--color': color}">
						<text class="name">
							<template v-if='!leftType'>综合</template>
							<template v-if='leftType==5'>新品</template>
							<template v-if='leftType==3'>热度</template>
							<template v-if='leftType == 1 && state == 1'>升序</template>
							<template v-if='leftType == 1 && state == 2'>降序</template>
						</text>
						<text v-if='checkTab' class="icon-shangsanjiaoxing iconfont"></text>
						<text v-else class="icon-xiasanjiaoxing iconfont" ></text>
					</view>
					<view class="tab-item" :class="{'thmeColor':type==2}"  @click="navClick(2,1)">
						<text class="name">销量</text>
					</view>
					<view class="tab-item" :class="{'thmeColor':type==4}"  @click="navClick(4,1)">
						<text class="name">好评</text>
					</view>
					<view class="tab-item list-btn" @click="toggleCss" v-if='bid != "eYiDtKWz6Qhv_bWnBJ7Knw=="'>
						<text v-if='togClass' class="iconfont icon-liebiao4"></text>
						<text v-else class="iconfont icon-liebiao"></text>
					</view>
					
					<view class="tab-item" @click="checkScreen=true">
						<text class="name">筛选</text>
						<text class="iconfont icon-shaixuan"></text>
					</view>
				</view>
				
				<view class="c-list" :class="{active:checkTab}">
					<view class="c-item flex-box flex-between" :class="{thmeColor: !type}"  @click="navClick('',1)">
						<text class="name">综合</text>
						<text class="iconfont icon-xuanzhong thmeColor" ></text>
					</view>
					<view class="c-item flex-box flex-between" :class="{thmeColor: type == 5}"  @click="navClick(5,1)">
						<text class="name">新品</text>
						<text class="iconfont icon-xuanzhong thmeColor" ></text>
					</view>
					<view class="c-item flex-box flex-between" :class="{thmeColor: type == 3}"  @click="navClick(3,1)">
						<text class="name">热度</text>
						<text class="iconfont icon-xuanzhong thmeColor" ></text>
					</view>
					<view class="c-item flex-box flex-between" :class="{thmeColor: type == 1 && state == 1}"  @click="navClick(1,1)">
						<text class="name">价格升序</text>
						<text class="iconfont icon-xuanzhong thmeColor" ></text>
					</view>
					<view class="c-item flex-box flex-between" :class="{thmeColor: type == 1 && state == 2}"  @click="navClick(1,2)">
						<text class="name">价格降序</text>
						<text class="iconfont icon-xuanzhong thmeColor" ></text>
					</view>
				</view>
			</view>
			<view class="mask" v-if='checkTab' @click="checkTab=false;"></view>
			
			<!-- 筛选、二级分类 -->
			<view class="mask mask-screen" v-if='checkScreen' @click="checkScreen=false">
				<view class="classify2" :style="{'padding-top':navHeight+System.statusBarHeight+'px'}" @click.stop>
					<view class="close-box flex-box align-center" @click="checkScreen=false">
						<text class="iconfont icon-guanbi1"></text>
					</view>
					<view class="flex" style="overflow:hidden auto;">
						<template v-if='promotionType'>
							<view class="list-title">促销</view>
							<view class="list">
								<view v-for='(item,i) in promotionType' :key='i' @click="chkAct(item.type,item.id)"  :class="currAct == item.type?'thmeBg':''" class="txt">{{ item.name }}</view>
								<!-- <view @click="chkAct(2)"  :class="currAct == 2?'thmeBg':''" class="txt">团购</view> -->
							</view>
						</template>
						
						<view class="list-title">价格区间</view>
						<view class="list price-chk flex-box">
							<view class="txt flex">
								<input type="number" v-model="priceMin" confirm-type="done" @confirm="confirm" placeholder="最低价格">
							</view>
							<view class="mid"></view>
							<view class="txt flex">
								<input type="number" v-model="priceMax" confirm-type="done" @confirm="confirm" placeholder="最高价格">
							</view>
						</view>
						<view class="list-title">分类</view>
						<view class="list">
							<view @click="chkClassify(item.id)"  :class="currClaID == item.id?'thmeBg':''"
							v-for="(item,index) in classifyData" :key='index' class="txt">{{item.name}}</view>
						</view>
						<!-- 商品品牌 -->
						<template v-if='brand.goods && brand.goods.list'>
							<view class="list-title">{{ brand.goods.name }}</view>
							<view class="list">
								<view @click="chkBand(item.id,1)"  :class="goodsBrandID == item.id?'thmeBg':''"
								v-for="(item,index) in brand.goods.list" :key='index' class="txt">{{item.title}}</view>
							</view>
						</template>
						<!-- 店铺品牌 -->
						<template v-if='brand.store && brand.store.list'>
							<view class="list-title">{{ brand.store.name }}</view>
							<view class="list">
								<view @click="chkBand(item.id,2)"  :class="storeBrandID == item.id?'thmeBg':''"
								v-for="(item,index) in brand.store.list" :key='index' class="txt">{{item.title}}</view>
							</view>
						</template>
					</view>
					<view class="btns flex-box">
						<view @click="reset(1)">重置</view>
						<view class="thmeBg"  @click="reset(2)">确定</view>
					</view>
				</view>
			</view>
			
			<!-- 商品 -->
			<view class="goodsContent" v-if='goods && goods.length>0'>
				<view class="whitebor" v-show='togClass'>
					<GoodsList hot='1' positionshow='1' v-show='goods && goods.length>0' :goodsData='goods' type='1'></GoodsList>
					<view class="DiLine" v-if='showLine'>-------- 我也是有底线的 --------</view>
				</view>
				<view v-show='!togClass' style="background-color: #FFFFFF;">
					<GoodsList hot='1' positionshow='1' v-show='goods && goods.length>0' :goodsData='goods' type='2'></GoodsList>
					<view class="DiLine" v-if='showLine'>-------- 我也是有底线的 --------</view>
				</view>
			</view>
			<empty type='1' v-if='noData' cat='4' msg='还没有相关商品哦~'></empty>
		</view>
		
		
		<tabBar :tab="12" v-if="back == 0"></tabBar>
		
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	var that;
	import GoodsList from '../../components/goodsList.vue'
	export default {
		components: {
			GoodsList
		},
		data() {
			return {
				back:1,
				toTop:false,
				togClass: true,
				imgUrl: this.imgUrl,
				staticUrl: this.staticUrl,
				name: '',
				goods: [],
				className: '',
				classifyId: '',
				pageNum: 10,
				
				state: 1,
				page: 1,
				noData:false,
				classifyData:'' ,// 分类信息
				currClaID: '',
				more: false,// 是否加载更多
				type: '',
				leftType:'',
				serchState:false, // 搜索状态 不显示顶部导航栏
				showLine: false,
				title:'',
				checkTab: false,
				checkScreen: false,
				currAct:'',// 促销类型
				priceMin:'', // 最低区间
				priceMax:'', // 最高价格
				goodsBrandID:'', // 商品品牌
				storeBrandID:'', // 店铺品牌
				brand:'' ,//品牌
				firstClassifyId:'', //默认分类id
				loading: true,
				promotionType:'',// 促销
				
			}
		},
		
		onLoad(option) {
			console.log(option,'log');
			that = this;
			that.goods = [];
			if (option.classId != undefined) {
				that.classifyId = option.classId;
				that.firstClassifyId = option.classId
			}
			if(option.back) that.back = option.back;
			if(option.name) that.name = option.name;
			if(option.className) that.className = option.className
		    // that.getsearchGoods();
			that.getClassify();
			that.dataInit()
		},

		methods: {
			reset(type){
				if(type == 1){ // 重置
					that.currAct = ''; // 促销类型
					that.priceMax = ''; // 促销类型
					that.priceMin = ''; // 促销类型
					that.goodsBrandID = ''; // 促销类型
					that.storeBrandID = ''; // 促销类型
					that.currClaID = '';
					that.classifyId = that.firstClassifyId;
					that.dataInit()
				}else{
					that.checkScreen = false
					that.dataInit()
				}
			},
			chkBand(id,type){
				if(type == 1){// 商品品牌
					that.goodsBrandID = that.goodsBrandID == id ? '' : id
				}
				if(type == 2){// 店铺品牌
					that.storeBrandID = that.storeBrandID == id ? '' : id
				}
				that.dataInit()
			},
			getsearchGoods(){
				that.noData = false;
				that.$http.post({
					url: '/singleSaleApi/searchGoods',
					data: {
						b_id: that.bid,
						title: that.name,
						classify_id: that.classifyId
					}
				}).then(res => {
					if(res.errcode == 100){
						that.goods = res.data;
					}
					if(that.goods.length < 1){
					    that.noData = true;
					}
					if(that.goods.length > 5){
						that.showLine = true
					}
				})
			},
			chkAct(type,id){
				if(type == '999'){
					that.currClaID = ''
					that.classifyId = id
				}else{
					that.promotionType.forEach((item)=>{ // 点了同级分类的id后 切换需清空id
						if(that.classifyId == item.id){
							that.currClaID = ''
							that.classifyId = ''
						}
					})
				}
				that.currAct = that.currAct == type?'':type
				that.dataInit()
			},
			confirm(e){
				if(that.priceMin > that.priceMax){
					let max = that.priceMax
					that.priceMax = that.priceMin
					that.priceMin = max
				}
				that.dataInit()
			},
			dataInit(){
				uni.showLoading({
					mask: false,
					title: '正在加载'
				})
				that.page = 1;
				that.goods = [];
				that.goodsSort();
			},
			chkClassify(id){ // 切换分类
				if( that.currClaID != id ){
					that.currClaID = id;
					that.classifyId = id;
					that.dataInit()
				}else{
					that.currClaID = '';
					that.classifyId = that.firstClassifyId;
					that.dataInit()
				}
			},
			getClassify(){ // 获取二级、同级分类
				that.$http.post({
					url: '/singleSaleApi/getClassify',
					data: {
						classify_id: that.classifyId,
						
					}
				}).then(res => {
					if (res.data) {
						if(res.data.brand)
							that.brand = res.data.brand
						if(res.data.promotionType)
							that.promotionType = res.data.promotionType
						if(res.data.lowerClass){
							// that.currClaID = res.data.lowerClass[0].id;
							that.classifyData = res.data.lowerClass
						}
						else{
							that.classifyData = res.data.peerClass;
							that.currClaID = that.classifyId;
						}
					}
					that.loading = false
				})
			},
			navClick: function(type,state) {
				that.type = type;
				if(type != 4 && type != 2){
					that.leftType = type
				}
				that.showLine = false
				setTimeout(()=>{
					that.checkTab = false
				},200)
				that.state = state;
				that.dataInit()
			},
			goodsSort: function() {
				that.noData = false;
				that.more = false;
				that.showLine = false
				that.$http.post({
					url: '/singleSaleApi/sortClassGoods',
					data: {
						name: that.name,
					
						type: that.type,
						state: that.state,
						page: that.page,
						pageNum: that.pageNum,
						classify_id: that.classifyId,
					
						actType: that.currAct=='999'?'':that.currAct, // 促销类型
						priceMax: that.priceMax, // 最高价格
						priceMin: that.priceMin, // 最低价格
						goodsBrandID: that.goodsBrandID, // 商品品牌
						storeBrandID: that.storeBrandID, // 店铺品牌
					}
				}).then(res => {
					if (res.code == 100 && res.data.DataArr) {
						that.goods = that.goods.concat(res.data.DataArr);
						if(res.data.DataArr.length >= that.pageNum){
							that.more = true
							that.page++
						}
					}
					if(that.goods.length < 1){
					    that.noData = true;
					}
					if(that.goods.length > 5 && (!res.data || res.data.DataArr.length < that.pageNum)){
						that.showLine = true
					}
					uni.hideLoading()
				})
			},
			toggleCss: function() {
				that.togClass = !that.togClass;
				that.page = 1;
				that.goods = [];
				that.goodsSort();
			}
		},
		computed:{
			...mapState(['color','System','navHeight','vid','nameDefinition','share','bid','tabTitle']),
		},
		onShareAppMessage(option) {
			let share = this.share;
			return {
				title: share.title,
				desc: share.desc,
				path: '/pages/index/index?share_v_id=' + this.vid,
				imageUrl: share.imageUrl
			}
		},
		onReachBottom() {
			if(that.more){
				that.goodsSort();
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 200) {
				that.toTop = true;
			} else {
				that.toTop = false
			}
		},
	}
</script>

<style scoped lang="scss">
	.goodsContent{
		padding-top: 10rpx;
	}
	.mask{
		z-index: 90;
		transition: all .2s;
		overflow: hidden;
	}
	.list-nav {
		z-index: 100;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		background-color: #FFFFFF;
		padding-top: 16rpx;
		box-sizing: border-box;
		.mySearch{
			border-radius: 30rpx;
			margin-bottom: 16rpx;
			padding: 0 $uni-page-space;
			.icon-xiangzuo{
				font-size: 40rpx;
				font-weight: 400;
				margin-right: 20rpx;
				color: #999999;
			}
			.navigator-search{
				border: 1px solid #F2F2F2;
				height: 56rpx;
				border-radius: 56rpx;
				.icon-btn_search{
					color: #CDCDCD;
					font-size: 34rpx;
					font-weight: normal;
					margin-left: 12rpx;
				}
				.txt{
					color: #999999;
					margin-left: 10rpx;
				}
				.txt1{
					color: #333333;
					margin-left: 10rpx;
				}
			}
			.cancel-txt{
				font-size: 26rpx;
				padding-left: 20rpx;
			}
		}
		.tab-list{
			height: 80rpx;
			padding-bottom: 20rpx;
			justify-content: space-around;
			.tab-item{
				color: #333333;
				// &:nth-child(1){
				// 	width: 150rpx;
				// }
				.name{
					font-size: 28rpx;
					color: inherit;
					margin-right: 6rpx;
				}
				.icon-shangsanjiaoxing,.icon-xiasanjiaoxing{
					font-size: 20rpx;
					color: inherit;
				}
				.icon-shaixuan{
					font-weight: bold;
					font-size: 22rpx;
				}
			}
			.list-btn{
				.iconfont{
					font-size: 40rpx;
					color: #333333;
				}
			}
		}
		.c-list{
			background-color: #fafafa;
			height: 0;
			overflow: hidden;
			transition: height 0.2s;
			&.active{
				height: 406rpx;
			}
			.c-item{
				padding: 0 $uni-page-space;
				line-height: 80rpx;
				height: 80rpx;
				border-bottom: 1px solid #F2F2F2;
				color: #333333;
				.name{
					font-size: 28rpx;
					color: inherit;
				}
				.iconfont{
					display: none;
					font-size: 34rpx;
				}
				&.thmeColor{
					.iconfont{
						display: inline-block;
					}
				}
				&:nth-last-of-type(1){
					border: none;
				}
			}
		}
	}
	
	.mask-screen{
		z-index: 108;
		overflow: hidden;
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		.classify2{
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			height: 100%;
			width: 500rpx;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			.list-title{
				font-size: 26rpx;
				font-weight: 700;
				padding: 10rpx $uni-page-space;
			}
			@keyframes show{
				0%{
					right: -500rpx;
				}
				100%{
					right: 0;
				}
			}
			animation: show .2s linear;
			.close-box{
				height: 70rpx;
				padding-right: $uni-page-space;
				justify-content: flex-end;
				.icon-guanbi1{
					font-size: 30rpx;
				}
			}
			.list{
				flex: 1;
				overflow-y: auto;
				padding: 10rpx $uni-page-space;
				margin-right: -20rpx;
				margin-top: 20rpx;
				border-bottom: 1px solid #F5F5F5;
				.txt{
					display: inline-block;
					color: #666666;
					padding: 0 20rpx;
					margin: 0 20rpx 20rpx 0;
					line-height: 50rpx;
					background-color: #EEEEEE;
					border-radius: 40rpx;
				}
				.thmeBg{
					color: #FFFFFF;
				}
			}
			.price-chk{
				align-items: center;
				view{
					text-align: center;
					input{
						height: 50rpx;
						line-height: 50rpx;
					}
				}
				
				.mid{
					height: 1px;
					width: 24rpx;
					margin: 0 20rpx 20rpx 0;
					background-color: #EEEEEE;
				}
			}
			.btns{
				height: 120rpx;
				padding: 0 20rpx;
				align-items: center;
				justify-content: center;
				border-top: 1px solid #EEEEEE;
				view{
					line-height: 56rpx;
					flex: 1;
					text-align: center;
					border-radius: 56rpx;
					margin: 0 20rpx;
					&:nth-child(1){
						border: 1px solid #EEEEEE;
						color: #333333;
					}
					&:nth-child(2){
						color: white;
					}
				}
			}
		}
	}
</style>
